iT邦幫忙

DAY 43
6

30天掌握Sass語法系列 第 39

Sass開發流程設計 - (13)Susy RWD Grid排版流程(上)

  • 分享至 

  • xImage
  •  

前面花了幾章篇幅討論Susy該怎麼用,
這次我們就直接進入實作吧,
首先我先找了個free的template:http://www.html5mania.com/dopetrope-free-html5-responsive-site-template/
考慮時間性與爆肝的程度,
預訂排版版型濃縮如下:

這裡分享的內容就是個人的經驗法則了,
畢竟susy只是個框架,該如何運用它還是得靠實務上的判斷:

觀察美術所提供的版型螢幕解析度

此版型的PC版是1200px,
我就會抓個人的Grid的習慣,
和美術討論是否能進行微調,
像以常見的grid的話
所以PC版本就變成為1200px/16(網頁預設字體大小) = 75em,
間距(gutter)我習慣設定為1em,就從12~16欄看是否有差不多的版型,
最後總得下面數值:

$total-columns: 15
$column-width: 4em
$gutter-width: 1em
$grid-padding: 1em
.container 
	+container
編譯出的CSS
.container {
    max-width: 74em;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
  }

設定好後,
再思考該怎麼設定@media query,
如果你不曉得該怎麼設定media query,
像在瀏覽英文網頁文章時,
網頁設計師會建議一行以45~75個字為主,
太多或太短都會造成閱讀上的不便,
所以這裡我就先設定一些比較熱門的螢幕解析度區間後,
再依照實際排版狀況來進行微調,
所以預設的螢幕解析度區間設定如下:

$total-columns: 5
$column-width: 4em 
$gutter-width: 1em 
$grid-padding: 1em
$pad : 768px 12
$pc  : 960px 15
.container 
	+container
	+at-breakpoint($pad)
		+container
	+at-breakpoint($pc)
		+container

//編譯出來的CSS
.container {
  max-width: 24em;
  _width: 24em;
 ...
}
@media (min-width: 768px) {
  .container {
    max-width: 59em;
    padding-left: 1em;
    padding-right: 1em;
    ...
  }
}
@media (min-width: 960px) {
    max-width: 74em;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
  }
}

再來規劃版面UI:

通常我都是會把PSD列印下來,
然後先畫個HTML與CSS雛型再繼續,
想得差不多後就可以開始建置layout了,
先以手機版做起,畫面設計為off canvas為主:
HTML

<!doctype html>
<html lang="en">

    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/default.css">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/all.js"></script>


 <header class="header">
     <div class="menu-control">open menu</div>
     <h1>Dopetrope</h1>
 </header>
 <div class="container">
     <nav class="menu">
         <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Dropdown</a></li>
             <li><a href="#">RightSidebar</a></li>
             <li><a href="#">LeftSidebar</a></li>
             <li><a href="#">No Sidebar</a></li>
         </ul>
     </nav>
     <div class="main">
         <div class="banner">
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipi<em class="test-color">sicing elit. Cupiditate, amet</em> dignissimos debitis laboriosam perferendis facere mollitia veniam velit repudiandae a veritatis officia harum cumque fugiat at. Debitis, accusamus dicta blanditiis.
             </p>
         </div>
         <div class="product">
             <section></section>
             <section></section>
             <section></section>
             <div class="bar">
                 <a href="#">Get Stared</a>
                 <a href="#">Learn More</a>
             </div>
         </div>
         <article class="blog">
             <h2>BLOG</h2>
             <section></section>
             <section></section>
         </article>
     </div>
 </div>

jQuery

//收合選單用
$(document).ready(function($) {
    $( ".menu-control" ).on( "click", function() {
        $('body').toggleClass('open');

    });
});

--
接下來再來思考各區塊做RWD的設計:
menu
menu的部分已有講過,
會套入SUSY off canvas+jquery來實踐效果。

Banner

這區塊我先抽掉,裡面放純文字,
先觀察滿版情況下在各螢幕解析度上,
該設定那些字型大小,使用者瀏覽上才較舒適。

Product

mobile自然是1欄式垂直滾動,
pad則是2列2欄式,最下面的按鈕遞補進來在右下。
Pc再調整為原設計。

Blog

這個區塊的pad與pc大小我打算都設定為一列二欄式。

--

規劃完後就可以開始寫Sass哩,
明天會再統一講解這個部分,
大家晚安嘍^_^


上一篇
Sass開發流程設計-(12) Compass Vertical Rhythm & Susy other setting
下一篇
Sass開發流程設計 - (14)Susy RWD Grid排版流程(下)
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言